<template>
  <div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
      <el-table-column prop="dynamicUser.userNick" label="信息" > 
        <template slot-scope="scope">
          <div>
            <div>{{timeFun(scope.row.createTime)}}</div>
            <div class="red" v-if="scope.row.updateTime">再次提交</div>
            <div class="red" v-else>初次提交</div>
            <div>城市: {{scope.row.hospitalInfo.city}}</div>
            <div>医院: {{scope.row.hospitalInfo.name}}</div>
            <div>类别: {{scope.row.type}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="内容">
        <template slot-scope="scope">
          <div>
            <div>标题：{{scope.row.title}}</div>
            <div>内容 <el-button type="primary" class="addBtn" @click="lookInfo(scope.row.introduction)">内容详情</el-button></div>
             <div>
              <img :src="scope.row.cover" @click="showImage(srcFun(scope.row.cover))" style="margin-right:5px;margin-top:10px;width:70px;height:80px"/>
            </div>
          </div>
        </template>
      </el-table-column>      
      <el-table-column prop="status" label="价格" width="80">
        <template slot-scope="scope">
          <div>{{scope.row.price}}</div>
          <div>原价：</div>
          <div>{{scope.row.originalPrice}}</div>
        </template>
      </el-table-column>
      
      <el-table-column prop="status" label="状态" width="80">
        <template  slot-scope="scope">
          <span style="color:#67c23a" v-if="scope.row.auditStatus==1">通过</span>
          <span style="color:red" v-else-if="scope.row.auditStatus==2">审核未通过</span>
          <span v-else>待审核</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <div>
            <el-button type="warning" class="addBtn" v-if="scope.row.auditStatus==1" @click="passFun(scope.row.id,0)">取消通过</el-button>
            <el-button type="success" class="addBtn" v-if="scope.row.auditStatus==0" @click="passFun(scope.row.id,1)">通过</el-button>
            <el-button  type="primary" class="addBtn" v-if="scope.row.auditStatus !=1" @click="noPassFun(scope.row.id)">反馈</el-button>
            <!-- <el-button  type="danger" class="addBtn" @click="deletFun(scope.row.id,2)">删除</el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    
     
     <el-dialog :title="title" :visible.sync="dialogVisible" center width="40%" :before-close="handleClose">
        <el-form label-position="left" label-width="80px" ref="ruleForm2" :model="ruleForm2" :rules="rules2">
          <el-form-item label="反馈内容" prop="labelName">
            <div style="display:flex;align-items:center">
              <el-input v-model="ruleForm2.labelName" style="width:300px"></el-input>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="passFun(editId,2)">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="商品详情" :visible.sync="infoStatus" center width="40%" :before-close="infoClose">
        <div v-html="infoValue"></div>
        
      </el-dialog>

      <el-dialog :visible.sync="showSta">
      <img width="100%" :src="showImgeUrl" alt="">
    </el-dialog>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'

  export default {
    props:['navStatus'],

    data() { 
     
      var labelName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入标签名'));
        } else {
          callback();
        }
      };
      return {

        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        currentPage4: 1,//分野  
        total:0,      
        tableData: [],
        page:1,
        keyword:'',
        infoStatus:false,
        dialogVisible: false,
        infoValue:'',
        showSta:false,
        showImgeUrl:'',
        titleImgurl:'',
        editId:'',
        title:'反馈',
        pageSize:10,
        ruleForm2: {
          labelName: '',
        },
        rules2: {
          labelName:[
             { validator: labelName, trigger: 'blur' }
          ]
        }
      }
    },

    created() {
      this.getList()
    },
    methods: {
      getList(val=''){
        this.keyword = val;
        const parm ={
          "pageIndex":this.page,
          "pageSize":this.pageSize,
          "keyword":this.keyword
        };
        if(this.navStatus==0){
          parm.status = this.navStatus
        }
        Http.getAuditList(parm)
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
           this.dialogVisible = false;
          
        })
        .catch( error => {
          
        });
      },
      timeFun(val) {
        return getTime(val)
      },
      srcFun(obj){
        if(obj.indexOf('http://') > -1){
          return obj
        } else{
          obj = 'http://odqiuyfsp.bkt.clouddn.com/'+obj
        }
        return obj
      },
      showImage(row){
        this.showSta = true;
        this.showImgeUrl = row
      },
      
      
      noPassFun(id) {
        this.editId = id;
        this.dialogVisible = true;
      },
     
      passFun(id,auditStatus){ //审核方法
        const param = {
           id,
           auditStatus
        }
        this.audit(param)
      },
      audit(param){
        let txt ,state;
      
        if (param.auditStatus == 0) {
          txt = '取消通过'
        } else if (param.auditStatus == 1) {
          txt = '审核通过'
        } else if (param.auditStatus == 2) {
          txt = '反馈成功';
          param.auditStatus = 2;
          this.$refs['ruleForm2'].validate((valid) => {
           if (valid) {
             param.auditReason = this.ruleForm2.labelName
           } else {
             state = true;
           }
         })
        };
       
        Http.commonAudit(param)
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success(txt)
            this.getList()
          } else {
            param.auditStatus ==1 ? this.$message.error('审核失败') : this.$message.error('反馈失败');
          }
        })
        .catch( error => {
          this.$message.error('服务器请求失败')
        })
      },
      lookInfo(row) {
        
        const val = row.replace('<img','<img style="width:100%"')
        
        this.infoValue = val;
        this.infoStatus = true;
      },

      handleClose(done) {
        this.ruleForm2.labelName = '';
        this.dialogVisible = false;
      },
      infoClose(){
        this.infoStatus = false;
        this.infoValue = '';
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist()
        
      },
     
    }
  }
</script>